const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry: "./src/main.js",
  plugins: [
    new HtmlWebpackPlugin({
      title: "vue demo",
      template: "index.html",
    }),
    new VueLoaderPlugin(),
  ],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "demo.js",
    publicPath: '/',
    chunkFilename: '[name].js', // 确保动态导入的模块能够正确被加载
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|jpg|svg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          esModule: false,
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  // 将vue切换成运行时 + 编译的版本，
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js", // 'vue/dist/vue.common.js' for webpack 1
    },
  },
  // 提供一个简单的web服务器，能够实时重新加载。
  devServer: {
    static: path.resolve(__dirname, "static"),
  },
    
};
